<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

      $(function (){

        $("#show").click(function (){
          $("img").show(2000,function (){
            alert("显示完毕");
          })
        })

        $("#hide").click(function (){
          $("img").hide(500,function (){

          })
        })

        $("#autoShowHide").click(function (){
          $("img").toggle(2000);
        })

        $("#slideDown").click(function (){
          $("img").slideDown(2000);
        })

        $("#slideUp").click(function (){
          $("img").slideUp(1000);
        })

        $("#autoDownUp").click(function (){
          $("img").slideToggle(500);
        })

        $("#fadeIn").click(function (){
          $("img").fadeIn(2000);
        })

        $("#fadeOut").click(function (){
          $("img").fadeOut(1000);
        })

        $("#autoInOut").click(function (){
          $("img").fadeToggle(500);
        })

        $("#fadeTo").click(function (){
          $("img").fadeTo(500,0.3);
        })



      })

    </script>

    <style type="text/css">
      div{
        width:1000px;
        height:700px;
        padding-top: 100px;
      }

      img{
        width:800px;
        height:500px;
      }

    </style>



</head>
<body>

    <center>
      <div>
        <img src="../pic/1.jpg">
        <br/> <br/> <br/>
        <input type="button" id="show" value="显示"/>
        <input type="button" id="hide" value="隐藏"/>
        <input type="button" id="autoShowHide" value="自动显示隐藏"/>

        <input type="button" id="slideDown" value="展开"/>
        <input type="button" id="slideUp" value="收起"/>
        <input type="button" id="autoDownUp" value="自动展开收起"/>


        <input type="button" id="fadeIn" value="淡入"/>
        <input type="button" id="fadeOut" value="淡出"/>
        <input type="button" id="autoInOut" value="自动淡入淡出"/>
        <input type="button" id="fadeTo" value="淡出透明度"/>

      </div>
    </center>

</body>
</html>